<html>
  <head>
    <title>Plus: very basic sample</title>
    <style>
      @import url(../plus.css); /* the only thing needed to include Plus framework */
      @import url(../../note.css); 
      
      ol { width:*; }
      ol > li { flow:horizontal; border-bottom:1px solid dotted;}
      ol > li > picture { size: 200dip 100dip; foreground-size: contain; }
      ol > li > output { display:block; }
      
      div.test { visibility:none; background: gold; width: max-content; }
      div.test:expanded { visibility:visible; }
      
      //div.test2 { visibility:visible; }
      //div.test2:collapsed { visibility:none; }
      
      [@collapsed] { visibility:none; }
      [@collapsed]:not(:collapsed) { visibility:visible; }      
      
    </style>
    
    <script type="text/tiscript">
  
      namespace Data // our model
      {  
        var someCustomers = [{name:"Symantec", image:"http://sciter.com/screenshots/slide-norton360.png" },
                             {name:"ESET", image:"http://sciter.com/screenshots/slide-eset.png"},
                             {name:"Avast", image:"http://sciter.com/screenshots/slide-avast.png"},
                             {name:"BitDefender", image:"http://sciter.com/screenshots/slide-bitdefender.png"},
                             {name:"Comodo", image:"http://sciter.com/screenshots/slide-comodo.png"} ];
                             
        var isButtonEnabled = true;
        var isEditReadonly = false;
        
        var isSectionExpanded = true;
        var isSectionCollapsed = true;
        
      }    
      
    </script>
  </head>

<body model="Data"> <!-- define data model we observe -->

  <note><p>List below is bound with <code>Data.someCustomers</code> array and so it reflects list items in that array.</p>
        <p>Pictures are using "bound" attributes notation: <code>&lt;picture @src="customer.image" /&gt;</code></p>
  </note>

  <h3>@src attribute demo</h3> 

  <!-- the repeateable section -->
  <ol each="customer in someCustomers">
      <li><picture @src="customer.image" /> <output(customer.name)/></li>
  </ol>
  
  <h3>@enabled attribute demo</h3> 
  <form>
    <button @enabled="isButtonEnabled">this button</button> <button|checkbox(isButtonEnabled)>is enabled</button> 
  </form>

  <h3>@readonly attribute demo</h3> 
  <form>
    <textarea @readonly="isEditReadonly">Text</textarea> <button|checkbox(isEditReadonly)>is readonly</button> 
  </form>

  
  <h3>@expanded attribute demo</h3> 

  <section>  
    <button|checkbox(isSectionExpanded)>Show/hide next block</button>:
    <div.test @expanded="isSectionExpanded">block to be shown/hidden</div> 
  </section>
  <section>
    <button|checkbox(isSectionCollapsed)>Next block hidden</button>:
    <div.test2 @collapsed="isSectionCollapsed">block to be shown/hidden</div> 
  </section>

  <section>
    <div.test2 @collapsed="!isSectionCollapsed">block to be hidden/shown (test of condition expression)</div> 
  </section>

  
</body>
</html>
